<template>
  <div class="container">
    <!-- 收费员考核 -->
    <el-tabs class="tabs-borderCard" v-model="activeName">
      <el-tab-pane label="收费明细" name="one">
        <!-- 查询条件 -->
        <el-form :inline="true" class="tableSearchBox" size="medium">
          <el-form-item label="收费员：">
            <el-select v-model="search.cashierID" clearable placeholder="请选择收费员">
              <el-option v-for="(item,index) in tollCollectorList" :key="index" :label="item.name" :value="item.suid">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收费日期：">
            <el-date-picker v-model="search.startTime" value-format="yyyy-MM-dd" placeholder="开始日期" :editable="false">
            </el-date-picker>-
            <el-date-picker v-model="search.endTime" value-format="yyyy-MM-dd" placeholder="结束日期" :editable="false">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getClerkData">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- /查询条件 -->
        <PagesTable :tableMaxHeight="tableHeight" :isIndex="true" :tableID="'table1'"
          :tableHeader="tableInfo.tableHeader" :tableData="tableInfo.tableData" :tableSpan="tableSpan" :border="true"
          :tablePagination="tableInfo.tablePagination" @pageSize="pageSizeChange" @currentPage="currentPageChange" />
      </el-tab-pane>
      <el-tab-pane label="收费日统计" name="two">
        <!-- 查询条件 -->
        <el-form :inline="true" class="tableSearchBox" size="medium">
          <el-form-item label="收费日期：">
            <el-date-picker v-model="search.payTime" value-format="yyyy-MM-dd" placeholder="收费日期" :editable="false"
              :clearable="false">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getDayData()">查询
            </el-button>
          </el-form-item>
        </el-form>
        <PagesTable :isIndex="true" :tableID="'table2'" :tableHeader="tableInfo2.tableHeader"
          :tableData="tableInfo2.tableData" :tableSpan="tableSpan2" :border="true"
          :tablePagination="tableInfo2.tablePagination" />
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";
  export default {
    components: {
      PagesTable
    },
    data() {
      return {
        tableHeight: "",
        activeName: "one",
        search: {
          cashierID: "", //收费员ID
          startTime: "", //开始时间
          endTime: "", //结束时间
          payTime: new Date().format("yyyy-MM-dd"), //日统计的查询时间
        },
        tollCollectorList: [{
            suid: 1,
            name: "石慧玲"
          },
          {
            suid: 2,
            name: "尚兰英"
          },
          {
            suid: 3,
            name: "王静婷"
          },
          {
            suid: 4,
            name: "郑 锋"
          }
        ], //收费员列表
        tableHeight: "200",
        tableSpan: {
          mark: "userPayingRecordID",
          colsIndex: [0, 1, 2, 3, 4, 5, 14, 15]
        },
        tableInfo: {
          tableHeader: [{
              name: "缴费编号",
              mark: "userPayingRecordID"
            },
            {
              name: "用户编号",
              mark: "userID"
            },
            {
              name: "收费员",
              mark: "cashier"
            },
            {
              name: "用户姓名",
              mark: "name"
            },
            {
              name: "小区",
              mark: "villageName"
            },
            {
              name: "账单编号",
              mark: "meterReadingRecordID"
            },
            {
              name: "水表编号",
              mark: "meterID"
            },
            {
              name: "用水类型",
              mark: "waterRateName"
            },
            {
              name: "用水量",
              mark: "currWaterCount"
            },
            {
              name: "预存水量",
              mark: "currDepositWater"
            },
            // {
            //   name: "水费",
            //   mark: "realWaterFee"
            // },
            {
              name: "水票费",
              mark: "receiptTotalFee"
            },
            {
              name: "水资源税",
              mark: "tax"
            },
            {
              name: "污水费",
              mark: "effluentFee"
            },
            // {
            //   name: "滞纳金",
            //   mark: "realLateFee"
            // },
            {
              name: "实收现金",
              mark: "realPaymentMoney"
            },
            {
              name: "缴费时间",
              mark: "userPayingRecordCreateTime", //payTime
              width: "160"
            },
            // {
            //   name: "抄表员",
            //   mark: "readerName"
            // },
            // {
            //   name: "收费员",
            //   mark: "cashier"
            // }
          ],
          tablePagination: {
            show: true,
            current: 1,
            size: 10,
            total: 0
          },
          tableData: [],
          tableDataAll: []
        },
        tableSpan2: {
          mark: "suid",
          colsIndex: [0, 1, 8]
        },
        tableInfo2: {
          tableHeader: [{
              name: "收费员",
              mark: "cashierName"
            },
            {
              name: "用水类型",
              mark: "waterRateName"
            },
            {
              name: "水票费",
              mark: "receiptTotalFee"
            },
            {
              name: "水资源税",
              mark: "tax"
            },
            {
              name: "税盘合计",
              mark: "sphj"
            },
            {
              name: "污水费",
              mark: "effluentFee"
            },
            {
              name: "小计",
              mark: "xj"
            },
            {
              name: "合计",
              mark: "hj"
            },
          ],
          tablePagination: {
            show: false,
            current: 1,
            size: 10,
            total: 0
          },
          tableData: [],
          tableDataAll: []
        }
      };
    },

    mounted() {


      // this.getTollCollectorList();
      // this.getClerkData();
      // this.getDayData();

      //假数据-------
      let list=["张美丽","李富华","丁菊香","赵国富","赵丽平"]
      for (let index = 0; index < list.length; index++) {
        const name = list[index];
        let item={userPayingRecordID:100+index,userID:157+index,cashier:"李峰",name:name,villageName:"光明小区",meterReadingRecordID:1475412+index,meterID:156+index,waterRateName:"居民用水",currWaterCount:5+index,currDepositWater:0,receiptTotalFee:18+index,tax:2+index,effluentFee:0.5+index,realPaymentMoney:100,userPayingRecordCreateTime:"2024-07-18 16:12:23"}
        this.tableInfo.tableData.push(item);
      }
      this.tableInfo.tablePagination.total=this.tableInfo.tableData.length

      this.tableInfo2.tableData=[{
        suid:1, cashierName:"李峰",waterRateName:"居民用水",receiptTotalFee:500,tax:10,sphj:10,effluentFee:10,xj:530,hj:830
      },{
        suid:1, cashierName:"李峰",waterRateName:"企业用水",receiptTotalFee:200,tax:50,sphj:30,effluentFee:20,xj:300,hj:830
      },{
        suid:2,cashierName:"赵雪",waterRateName:"居民用水",receiptTotalFee:300,tax:30,sphj:3,effluentFee:3,xj:336,hj:336
      }]

    },
    beforeDestroy() {},
    created() {
      var self = this;
      var height = $(document).height() - 230 - 70 - 50;

      self.tableHeight = height + "";

    },
    methods: {
      getTollCollectorList() {
        //收费员列表
        const self = this;
        var param = {
          rid: 4
        };
        self.$axios.post("/service/bsSysuserInfoGet", param).then(res => {
          if (res.data.status === "success") {
            self.tollCollectorList = res.data.res;
          } else {
            self.$message(res.data.res);
          }
        });
      },
      getClerkData() {
        const self = this;
        var param = {
          // whole: 1,
          suid: self.search.cashierID,
          pageNum: self.tableInfo.tablePagination.current,
          pageSize: self.tableInfo.tablePagination.size
        };

        if (self.search.startTime && self.search.endTime) {
          param.startTime = self.search.startTime;
          param.endTime = self.search.endTime;
        } else if (self.search.startTime || self.search.endTime) {
          self.$message.error("收费日期查询需要选择开始日期及结束日期！");
          return;
        }
        self.$axios.post("/service/bsPayingRecordGetE", param).then(res => {
          if (res.data.status === "success") {
            self.tableInfo.tableData = res.data.res;
            self.tableInfo.tablePagination.total = res.data.total;
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      pageSizeChange(data) {
        const self = this;
        self.tableInfo.tablePagination.size = data;
        self.getClerkData();
      },
      currentPageChange(data) {
        const self = this;
        self.tableInfo.tablePagination.current = data;
        self.getClerkData();
      },
      getDayData() { //获取每个收费员各个用水类型的日统计情况
        const self = this;
        var param = {
          payTime: self.search.payTime
        };


        self.$axios.post("/service/bsPayingRecordGetF", param).then(res => {
          if (res.data.status === "success") {

            var tmp = res.data.res;



            //#region 计算相关合计------------------------------------------
            if (tmp.length > 0) {

              var lastId = "";
              var sum = 0;
              var waterType = []; //总计
              var rowSumArray = [] //横行合计，按人头算
              tmp.forEach(element => {
                var sphj = (Number(element.receiptTotalFee) + Number(element.tax)).toFixed(2)
                element.sphj = sphj //税盘合计
                element.xj = (Number(sphj) + Number(element.effluentFee)).toFixed(2) //小计
                //各类型水价的总计
                var bool = waterType.some((item, index) => item.waterRateName == element.waterRateName)
                if (bool) {
                  waterType.map((item, index, array) => {
                    if (item.waterRateName == element.waterRateName) {
                      item.receiptTotalFee = (Number(item.receiptTotalFee) + Number(element
                          .receiptTotalFee))
                        .toFixed(2) //水票费
                      item.tax = (Number(item.tax) + Number(element.tax)).toFixed(2) //水资源税
                      item.sphj = (Number(item.sphj) + Number(element.sphj)).toFixed(2) //税盘合计
                      item.xj = (Number(item.xj) + Number(element.xj)).toFixed(2) //小计
                    }
                  })
                } else {
                  var newItem = JSON.parse(JSON.stringify(element));
                  newItem.cashierName = "总计";
                  newItem.suid = "zj";
                  newItem.hj = 0;
                  waterType.push(newItem)
                }
                //各个收费员的合计
                var bool2 = rowSumArray.some((item, index) => item.suid == element.suid)
                if (bool2) {
                  rowSumArray.map((item, index, array) => {
                    if (item.suid == element.suid) {
                      item.hj = (Number(item.hj) + Number(element.xj)).toFixed(2) //小计
                    }
                  })
                } else {
                  var newItem = {
                    suid: element.suid,
                    cashierName: element.cashierName,
                    hj: element.xj
                  };
                  rowSumArray.push(newItem)
                }

              });

              var allSum = 0;
              rowSumArray.forEach(element => {
                allSum = (Number(allSum) + Number(element.hj)).toFixed(2);
              });

              waterType.forEach(element => {
                element.hj = allSum;
              });

              tmp = tmp.concat(waterType);

              //赋值横行的合计
              tmp.forEach(element => {
                var items = rowSumArray.filter((value, index) => value.suid == element.suid)
                if (items.length > 0) {
                  element.hj = items[0].hj;
                }
              });

            }
            //#endregion 计算相关合计------------------------------------------

            self.tableInfo2.tableData = tmp;

          } else {
            self.$message.error(res.data.res);
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
</style>